// 轮播业务
(function(){
	
	// 获取页面元素
	let oBannerList = document.querySelector('.banner-list');
	let oNumber = document.querySelector('.number');
	
	lb.ajax({
		url : BASE_URL + '/api_banner',
		data : {bannerId: 1},
		success(res){
			// console.log(res);
			if( res.code != 0){
				console.log("获取到的信息不是正确的信息" + res);
				return;
			}
			
			// 数据的遍历
			let strLi = '';
			let strSpan = '';
			
			res.data.forEach( item => {
				// 数据累加
				strLi += `<li><a href="product.html?goodsId=${item.goods_id}&catId=${item.cat_id}"><img src="${item.goods_thumb}" alt="" /></a></li>`;
				strSpan += `<span></span>`;
			});
			
			// 添加到页面
			oBannerList.innerHTML = strLi;
			oNumber.innerHTML = strSpan;
			
			// 数据的轮播
			banner();			
		}
	});
	
	// 轮播业务
	function banner(){
		//获取元素
		let oBanner = document.querySelector('.banner');
		let oNext = document.querySelector('.next');
		let oPrev = document.querySelector('.prev');
		let aLi = document.querySelectorAll('.banner-list li');
		let aSpan = document.querySelectorAll('.number span');
		
		//信号量，下标
		let n = 0;
		
		//下一张
		oNext.onclick = rightBtn;
		
		//封装自动播放 和 下一张业务
		function rightBtn(){
			n++;
			//验证
			n = n >= aLi.length ? 0 : n;
			
			//调用方法
			play();
		};
		
		//自动播放,开定时器
		let timer = setInterval(rightBtn, 2000);
		
		//上一张
		oPrev.onclick = function(){
			n--;
			//验证
			n = n < 0 ? aLi.length - 1 : n;
			
			//调用方法
			play();
		}
		
		// 点击小圆点, 批量监听
		for(let m = 0; m < aSpan.length; m++){
			
			//监听事件
			aSpan[m].onclick = function(){
				//当前点击的谁？？？i
				//设置联动
				n = m;
				//调用设置方法
				play();				
			}
			
		};
		
		// 鼠标移入移出
		oBanner.onmouseover = function(){
			//清除定时器
			clearInterval(timer);
		};
		
		oBanner.onmouseout = function(){
			//开定时器
			timer = setInterval(rightBtn, 2000);
		};
		
		//封装设置的方法
		function play(){
			//排它
			for(let i = 0; i < aLi.length; i++){
				//隐藏所有li
				aLi[i].style.display = 'none';
				//所有小圆点为 白色
				aSpan[i].style.background = '#ccc';
			}
			//设置当前显示
			aLi[n].style.display = 'block';
			aSpan[n].style.background = '#666';
		};
	};
	
	
})();

// 热门商品业务
(function(){
	
	let oBaseGoodContent = document.querySelector('.base-goods-content');
	let oMoreBtn = document.querySelector('.more-btn');
	
	// 默认页数和页数商品数
	let page = 1;
	let pagesize = 9;
	
	// 默认调用一次请求数据,DOM渲染
	goodsRender(page, pagesize);
	
	// 点击more
	oMoreBtn.onclick = function(){
		//加载第2页面
		page++;
		
		goodsRender(page, pagesize);
	}
	
	// 封装请求数据和DOM渲染
	function goodsRender(page, pagesize){
		// 请求热门商品数据
		lb.ajax({
			url : BASE_URL + '/api_goods',
			data : {page, pagesize},
			success(res){
				// console.log(res);
				// 验证
				if(res.code != 0){
					console.log("获取到的信息不是正确的信息" + res);
					return;
				}
		
				// 遍历组装
				res.data.forEach( item => {
					// 创建外层的li
					let li = document.createElement('li');
					// li内部使用字符串赋值
					li.innerHTML = `
						<div class="goods-up">
							<img src="${item.goods_thumb}" alt="" />			
							<a href="product.html?goodsId=${item.goods_id}&catId=${item.cat_id}" class="goods-mask">
								<p>¥${item.price}</p>
								<p>${item.goods_name}</p>
								<p>${item.goods_desc}</p>
							</a>
						</div>
						<div class="brand-down">
							<div>
								<img src="${item.brand_thumb}" alt="" />
								<span>${item.brand_name}</span>
							</div>
							<div>
								<span>${item.star_number}</span>
								<span class="iconfont icon-aixin_shixin"></span>
							</div>			
						</div>
					`;
					
					// 添加到页面
					// 使用添加，遍历一个添加一个
					oBaseGoodContent.appendChild(li);	
				});
			},
		});	
	};
})();